
const tableDrag = {
  inserted(el) {
    const tableBody = el.querySelector('.vxe-table .vxe-table--body-wrapper') || el
    tableBody.scrollLeft = 1000; 
    let isDown = false
    let startX
    let scrollLeft

    tableBody.style.cursor = 'grab'
    tableBody.style.scrollBehavior = 'smooth'
    console.log("进来了",el)

    const handleMouseDown = (e) => {
      isDown = true
      startX = e.pageX - tableBody.offsetLeft
      scrollLeft = tableBody.scrollLeft
      tableBody.style.cursor = 'grabbing'
    }

    const handleMouseLeave = () => {
      isDown = false
      tableBody.style.cursor = 'grab'
    }

    const handleMouseUp = () => {
      isDown = false
      tableBody.style.cursor = 'grab'
    }

    const handleMouseMove = (e) => {
         const divData = el.querySelector('.vxe-table .vxe-table--body-wrapper')
        console.log("dddsdf",divData)
      if(!isDown) return
      e.preventDefault()
      const x = e.pageX - tableBody.offsetLeft
      const walk = (x - startX) * 1.5
      tableBody.scrollLeft = scrollLeft - walk
      
tableBody.scroll({left: 100, behavior: 'smooth'}); 
    }

    tableBody.addEventListener('mousedown', handleMouseDown)
    tableBody.addEventListener('mouseleave', handleMouseLeave)
    tableBody.addEventListener('mouseup', handleMouseUp)
    tableBody.addEventListener('mousemove', handleMouseMove)

    el._tableDragEvents = {
      handleMouseDown,
      handleMouseLeave,
      handleMouseUp,
      handleMouseMove
    }
  },
  unbind(el) {
    const tableBody = el.querySelector('.vxe-table') || el
    const events = el._tableDragEvents || {}
    
    tableBody.removeEventListener('mousedown', events.handleMouseDown)
    tableBody.removeEventListener('mouseleave', events.handleMouseLeave)
    tableBody.removeEventListener('mouseup', events.handleMouseUp)
    tableBody.removeEventListener('mousemove', events.handleMouseMove)
  }
}

export default tableDrag
